<template>
  <div id="main" class="rotating-earth"></div>
</template>

<script>
import Echarts from 'echarts';
import 'echarts-gl';
import {onMounted} from 'vue'
import chinaMapData from '@/assets/china.json'

export default {
  name: "Home",
  setup(){
    onMounted(()=>{
      var chart = Echarts.init(document.getElementById('main'));
      Echarts.registerMap('china',chinaMapData)
      chart.setOption({
        // globe: {}
        series: [{
          type: 'map3D',
          map: 'china'
        }]
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.rotating-earth{
  width: 100%;
  height: 100%;
}
</style>
